<template>
  <div id="issueApplyListDiv">
    <Breadcrumb content="问题记录" />
    <div class="bodyContent">
      <Splitpanes>
        <Pane size="50">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findIssueApplyList" @keyup="keyupEnter"
                @search-click="findIssueApplyList"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="tloading" @click="findIssueApplyList"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="addIssueApplyDialog()"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBody">
            <vxe-table ref="issueApplyTableRef" class="mytable-scrollbar" border="inner" align="center" height="auto" :data="issueApplyList" :loading="tloading" @current-change="issueApplyRowClick"
              :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column field="title" title="标题" width="120">
              </vxe-column>
              <vxe-column field="customerName" title="客户名称">
              </vxe-column>
              <vxe-column field="priority" title="优先级">
                <template #default="{ row }">
                  <el-tag :type="getPriorityTagType(row)">{{ getPriorityDesc(row) }}</el-tag>
                </template>
              </vxe-column>
              <vxe-column field="submitterName" title="提交人">
              </vxe-column>
              <vxe-column field="submitTime" title="提交时间">
              </vxe-column>
              <vxe-column field="status" title="状态">
                <template #default="{ row }">
                  <el-tag :type="getStatusTagType(row)">{{ getStatusDesc(row) }}</el-tag>
                </template>
              </vxe-column>
              <vxe-column title="操作" fixed="right">
                <template #default="{ row }">
                  <vxe-button type="text" status="danger" icon="vxe-icon-undo" circle v-if="row.status==5" @click.native="reBackIssueApply(row)" class="spanIcon"></vxe-button>

                  <vxe-button type="text" status="danger" icon="vxe-icon-delete" circle v-if="row.status<5" @click.native="deleteIssueApply(row)" class="spanIcon"></vxe-button>
                </template>
              </vxe-column>
            </vxe-table>
            <vxe-pager align="left" min-height="32px" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult"
              :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" @page-change="handleSizeChange($event)"></vxe-pager>
          </div>
        </Pane>
        <Pane size="50">
          <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
            <el-tab-pane label="编辑问题" name="first" v-if="isEmpty(sltIssueApply)||(!isEmpty(sltIssueApply)&&sltIssueApply.status<5)">
              <IssueApplyEdit ref="issueApplyEditRef" @saveIssueApplySuccess="saveIssueApplySuccess" />
            </el-tab-pane>
            <el-tab-pane label="问题详情" name="second" v-if="!isEmpty(sltIssueApply)&&sltIssueApply.status>=5">
              <IssueApplyInfo ref="issueApplyInfoRef" />
            </el-tab-pane>
          </el-tabs>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import IssueApplyEdit from './IssueApplyEdit.vue'; //失控记录图表
import IssueApplyInfo from './IssueApplyInfo.vue'; //失控记录图表
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { AppStore } from '@/stores/store';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { isEmpty } from 'lodash';

// 定义变量区=============
let { proxy }: any = getCurrentInstance();
let store = AppStore();
let searchForm = {
  searchValue: ''
};
let tloading = ref(false);
let issueApplyList: any = reactive([]); //表格数据
let sltIssueApply: any = ref({});
let activeName = ref('first');
let issueApplyEditRef: any = ref(null);
let issueApplyInfoRef: any = ref(null);
// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];
// 分页
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});

// 方法使用区============
onMounted(() => {
  findIssueApplyList(); // 获取表格数据
});

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findIssueApplyList();
  }
}
//点击每页数量(分页查询)
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  findIssueApplyList();
}
function saveIssueApplySuccess(id: any) {
  sltIssueApply.value.id = id;
  findIssueApplyList();
}
// 获取质控规则表格数据
function findIssueApplyList() {
  tloading.value = true;
  issueApplyList.length = 0; //放入数据前清空数据
  const url = '/api/wk/wkIssueApply/findIssueApplyPageList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { seachValue: searchForm.searchValue, pageIndex: page.currentPage, pageSize: page.pageSize }
    })
    .then((res: any) => {
      issueApplyList.push(...res.data.records);
      page.totalResult = res.data.total;
      tloading.value = false;
      const kn = issueApplyList.find((k) => k.id == sltIssueApply.value.id);
      if (isEmpty(kn)) {
        issueApplyRowClick({ row: issueApplyList[0] }); //默认选中第一条数据
      } else {
        issueApplyRowClick({ row: kn }); //默认选中第一条数据
      }
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

// 点击设计模式表格当前行触发右侧表单变化
function issueApplyRowClick({ row }: any) {
  if (isEmpty(row)) {
    //clearForm();
    sltIssueApply.value = {};
  } else {
    (proxy.$refs.issueApplyTableRef as any).setCurrentRow(row);
    sltIssueApply.value = row;
  }
  proxy.$nextTick(() => {
    if (!isEmpty(sltIssueApply) && sltIssueApply.value.status >= 5) {
      activeName.value = 'second';
      issueApplyInfoRef.value.initPage(sltIssueApply);
    } else {
      activeName.value = 'first';
      issueApplyEditRef.value.initPage(sltIssueApply);
    }
  });
}

function addIssueApplyDialog() {
  //clearForm();
  (proxy.$refs.issueApplyTableRef as any).clearCurrentRow();
  sltIssueApply.value = {};
  activeName.value = 'first';
  proxy.$nextTick(() => {
    issueApplyEditRef.value.initPage(sltIssueApply);
  });
}
function deleteIssueApply(row: any) {
  proxy
    .$confirm('确定删除？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      const url = '/api/wk/wkIssueApply/deleteIssueApply';
      proxy.$http.post(url, row).then((res: any) => {
        if (res.status.code === 1) {
          findIssueApplyList();
          VxeMessage('删除成功', VxeNotifyType.success);
        } else {
          VxeMessage(res.status.msg, VxeNotifyType.error);
        }
      });
    })
    .catch((err: any) => {
      // VxeMessage(err, VxeNotifyType.error);
    });
}

function reBackIssueApply(row: any) {
  proxy
    .$confirm('确定撤回？', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(async () => {
      const url = '/api/wk/wkIssueApply/reBackIssueApply';
      let obj = {
        id: row.id,
        status: 0
      };
      proxy.$http.post(url, obj).then((res: any) => {
        if (res.status.code === 1) {
          findIssueApplyList();
          VxeMessage('撤回成功', VxeNotifyType.success);
        } else {
          VxeMessage(res.status.msg, VxeNotifyType.error);
        }
      });
    })
    .catch((err: any) => {
      // VxeMessage(err, VxeNotifyType.error);
    });
}
// 获取是否静态的tag标记(绿/红)
function getStatusTagType(row: any) {
  const status = row.status;
  if (status === 0 || status === 1) {
    return 'info';
  } else if (status === 5) {
    return 'danger';
  } else if (status === 10) {
    return 'warning';
  } else if (status === 15) {
    return 'warning';
  } else if (status === 20) {
    return '';
  } else if (status === 35) {
    return 'success';
  } else {
    return '';
  }
}

// 获取是否静态文字(是/否)
function getStatusDesc(row: any) {
  const status = row.status;
  switch (status) {
    case 0:
      return '暂存';
    case 1:
      return '退回';
    case 5:
      return '待分派';
    case 10:
      return '待开始';
    // return '待分派开发';
    // case 11:
    //   return '待分派实施';
    case 15:
      return '待开始';
    case 20:
      return '处理中';
    case 35:
      return '已关闭';
  }
}

function getPriorityTagType(row: any) {
  const value = row.priority;
  if (value === '1') {
    return 'danger';
  } else if (value === '2') {
    return 'warning';
  } else if (value === '3') {
    return '';
  } else if (value === '4') {
    return 'success';
  } else {
    return '';
  }
}

function getPriorityDesc(row: any) {
  const type = row.priority;
  switch (type) {
    case '1':
      return '高';
    case '2':
      return '较高';
    case '3':
      return '一般';
    case '4':
      return '较低';
  }
}
//页签切换方法
function tabHandleClick(){

}
</script>
<style lang="scss" scoped>
#issueApplyListDiv {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBody {
        height: calc(100% - 40px - 32px);
      }
      .el-tabs {
        height: 100%;
        :deep(.el-tabs__content) {
          height: calc(100% - 40px);
          padding: 0;
          .el-tab-pane {
            height: 100%;
          }
          #pane-first {
            padding: 15px;
            height: calc(100% - 30px);
            .el-form {
              height: 100%;
            }
          }
        }
      }
    }
  }
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
